<template>
	<view class="box">
		<!-- 全部车源 -->
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<!-- #ifndef MP-WEIXIN -->
			个人车源
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text @click="fanhui" style="margin-left:75rpx">个人车源</text>
			<!-- #endif -->
		</view>
		<!-- #ifdef H5 || APP-PLUS -->
		<scroll-view scroll-y :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 88rpx )'"
			@scrolltolower="down" refresher-background="#f5f5f5">
			<!-- #endif -->
			<!-- #ifdef MP -->
			<scroll-view scroll-y :style="'height:calc( 100vh - ' +statusBarHeight +'px - 88rpx )'"
				@scrolltolower="down" refresher-background="#f5f5f5">
				<!-- #endif -->
				<view class="list">
					<view class="li" v-for="(item, index) in Recommend" :key="index" @click="details(item.id)">
						<image class="img3" mode="aspectFit"
							:src="item.vehicleCoverPicture" />
						<view class="li_2">
							<view class="vehicleRecom">
								<text>{{item.title}}</text>
								<!-- <span>{{item.vehicleBrandModel.split('|')[0]+ " "}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.model?item.model+'/':""}} {{item.bodyStructureDoors+"门"+item.bodyStructureSeat+"座"+item.bodyStructureVehicle+"车"}}</span> -->
							</view>
							<view class="price">
								{{item.price}}万
							</view>
						</view>
					</view>
					<view v-if="Recommend.length == 0" class="none">
						<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
						<view>没有更多数据了</view>
					</view>
					<view class="down" v-show="Recommend.length != 0 && !downStatus">
						没有更多了
					</view>
				</view>
			</scroll-view>
			<uniBall></uniBall>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	let statusBarHeight;
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
	//#endif
	// #ifdef APP-PLUS
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
	//  #endif
	// #ifdef MP-WEIXIN
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
	//  #endif
	export default {
		data() {
			return {
				statusBarHeight,
				pageSize: 10,
				pageNo: 1,
				trigger: false,
				downStatus: true,
				upStatus: true,
				userInfo: uni.getStorageSync("Pduser"),
				imgUrl: this.$imgSrc,
				Recommend: [],
				activeData: [],
			};
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"]),
		},
		onLoad() {
			this.getFy();
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		async onPullDownRefresh() {
			this.Recommend = [];
			this.pageNo = 1;
			this.downStatus = true;
			if (this.upStatus) {
				this.trigger = true;
				await this.getFy();
			}
		},
		filters: {
			nums(val) {
				return val.toFixed(2);
			},
		},
		methods: {
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded",
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					},
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"],
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari",
					],
				});
			},
			getFy() {
				let that = this;
				this.upStatus = false;
				this.$myRequest
					.get("/api/mobile/vehicleOwner/getMyPersonalVehicleResources", {
						pageSize: this.pageSize,
						pageNo: this.pageNo,
					})
					.then((res) => {
						if (!res.vehicleInformation.pageList.length) {
							that.downStatus = false;
						}
						this.upStatus = true;
						this.trigger = false;
						this.Recommend = this.Recommend.concat(res.vehicleInformation.pageList);
						uni.stopPullDownRefresh();
					});
			},
			down() {
				if (this.downStatus) {
					this.pageNo++;
					this.getFy();
				}
			},
			async up() {
				this.Recommend = [];
				this.pageNo = 1;
				this.downStatus = true;
				if (this.upStatus) {
					this.trigger = true;
					await this.getFy();
				}
			},
			details(id) {
				uni.navigateTo({
					url: "/pages_owner/index/vehicleDetails?id=" + id,
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1,
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	.box {
		width: 100%;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		text-align: center;
		/* #ifdef MP-WEIXIN */
		text-align: left;
		display: flex;
		align-items: center;
		/* #endif */
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			left: 30rpx;
		}

		.p2 {
			position: absolute;
			bottom: 0rpx !important;
			right: 30rpx;
			/* #ifdef MP-WEIXIN */
			position: initial;
			margin-left: auto;
			margin-right: 200rpx;
			bottom: 16rpx !important;
			/* #endif */
		}
	}

	.view {
		position: relative;
		font-size: 26rpx;
		border: 0;
		color: #333333;
		margin-right: 0;

		image {
			position: absolute;
			width: 44rpx;
			height: 24rpx;
			top: 66rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.cur {
		color: #64b6a8;
		border: 0;
		transform: scale(1.1);
	}

	.down {
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.none {
		text-align: center;

		image {
			width: 430rpx;
			margin-bottom: 16rpx;
		}

		view {
			height: 40rpx;
			line-height: 40rpx;
			color: #666;
		}
	}
	/deep/ uni-switch, uni-checkbox, uni-radio{
		display: flex;
		align-items: center;
	}
	/deep/uni-checkbox .uni-checkbox-input {
	  background-color: rgba(0, 0, 0, 0);
	  border: 2rpx solid #999;
	}
	/deep/uni-radio:not([disabled]) .uni-radio-input:hover{
		border-color: #999;
	}
	/deep/uni-checkbox .wx-checkbox-input,
	/deep/uni-checkbox .uni-checkbox-input {
	  width: 48rpx;
	  height: 48rpx;
	}
	
	/deep/ uni-checkbox::before {
	  font-size: 40rpx;
	  margin-top: -14rpx;
	  right: 6rpx !important;
	}
	.list {
		padding-top: 30rpx;
		padding-left: 30rpx;
		width: 720rpx;

		.tit {
			color: #333333;
			font-size: 36rpx;
			margin-bottom: 12rpx;
		}

		.li {
			width: 96%;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 2rpx solid #e0e0e0;
			display: flex;
			// justify-content: space-between;

			.xian {
				position: absolute;
				height: 2rpx;
				background-color: #e0e0e0;
				bottom: 0;
				right: 0;
			}

			.img3 {
				background-color: #f8f8f8;
				width: 300rpx;
				height: 200rpx;
				border-radius: 20rpx;
			}

			.li_2 {
				margin-left: 24rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.vehicleRecom {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
					line-height: 44rpx;

					.tagLabel{
						vertical-align: top;
						background: #64B6A8;
						color: #fff;
						font-size: 24rpx;
						text-align: center;
						width: 106rpx;
						margin-right: 10rpx;
						padding: 4rpx 6rpx;
						border-radius: 4rpx;
					}
				}

				.price {
					font-size: 28rpx;
					font-weight: 600;
					color: #E00000;
				}
			}
		}

		.li:last-child {
			border-bottom: 0rpx solid #e0e0e0;
		}
	}
	.bot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0,0,0,0.16);
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.bot_qx{
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			text{
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				margin-left: 10rpx;
			}
		}
		.bot_sc{
			margin-right: 30rpx;
			width: 200rpx;
			height: 70rpx;
			background-color: #64B6A8;
			text-align: center;
			line-height: 70rpx;
			color: #fff;
			font-size: 32rpx;
			border-radius:35rpx ;
		}
	}
</style>
